<template>
  <div class="box-con">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>组织管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/authority/role/list' }">角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>查看人员</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tab_up">
      <span>ID：{{ roleId }}</span>
      <span>角色：{{ roleName }}</span>
    </div>
    <div class="tab">
      <el-table :data="dataTable" :cell-style="{'text-align':'center'}" style="width:100%" border>
        <el-table-column prop="id" label="ID" min-width="120"></el-table-column>
        <el-table-column prop="user_name" label="用户姓名" min-width="120"></el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="100"></el-table-column>
        <el-table-column prop="identity_card" label="身份证号" min-width="100"></el-table-column>
        <el-table-column prop="id_entity_card_address" label="身份证地址" min-width="100"></el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page_option.current_page"
          :page-sizes="[15, 20, 30, 50]"
          :page-size="page_option.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page_option.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataTable: [],
      page_option: {
        current_page: 1,
        page_size: 15,
        total: 0,
      },
      roleId: "", // 角色id
      roleName: "" // 角色名称
    };
  },
  mounted() {
    this.roleId = this.$route.query.id;
    this.roleName = decodeURIComponent(String(this.$route.query.name));
    this.getList();
  },
  methods: {
    getList() {
      let params = {
        pageNum: this.page_option.current_page,
        pageSize: this.page_option.page_size,
        id: this.$route.query.id
      };
      this.$api.authority.getRoleUserList(params)
        .then((res) => {
          if (res.code === 200) {
            console.log(res.data);
            let data = res.data;
            this.dataTable = data.list
            this.page_option.total = data.total
          }
        });
    },
    handleSizeChange(size) {
      this.page_option.page_size = size;
      this.page_option.current_page = 1;
      this.getList();
    },
    handleCurrentChange(current) {
      this.page_option.current_page = current;
      this.getList();
    },
  },
  destroyed() {
    localStorage.removeItem("roleId_lookRole");
  },
};
</script>

<style scoped>
.box-con {
  padding: 30px;
}

.tab_up {
  padding: 30px 0;
}

.tab_up > span {
  display: inline-block;
  width: 200px;
  font-weight: 400;
}

.footer {
  padding: 30px 0;
}

>>> .el-pagination {
  text-align: center;
}
</style>
